// ---------------------   箱线图-右  --------------------------------------
function market3b(market_name = '华冠超市') {
    $.post('http://127.0.0.1:5000/data-api/task3b', {market_name: market_name}).done(function (data) {
        var myChart = echarts.init(document.querySelector(".leftDown .chart2"));
        var option = {
            dataset: [
                {
                    source: data['value']
                },
                    {
                    transform: {
                        type: 'boxplot',
                        config: {
                            itemNameFormatter: market_name,
                        }
                    }
                },
                 {
        fromDatasetIndex: 1, // 异常值显示需要这一句
        fromTransformResult: 1// 异常值显示需要这一句
                }
            ],
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (param) {
                    // x轴名称
                    var result = param.name + '<br>';

                    var label = ['min', 'Q1', 'median', 'Q3', 'max'];
                    // 循环每一个
                    label.forEach((d, i) => {
                        // 标记 + label + value + 换行
                        result = result + param.marker + d + "<b style=\"display:inline-block;margin-left:35px;\">" + param.value[i+1] + "</b><br>"
                    });
                    // 返回格式化结果
                    return result
                }
            },
            grid: {
                left: '2%',
                top: '4%',
                bottom: '2%',
                right: '2%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#d5d5d5'
                    }
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#d5d5d5'
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#A7BAFA',
                    },
                },
                splitArea: {
                    show: true
                },
            },
            series: [
                {
                    type: 'boxplot',
                    datasetIndex: 1,
                    itemStyle: {
                        normal:{
                            borderColor: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#3EACE5' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#F02FC2' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                            },
                            borderWidth:1,
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(62,172,299,0.7)'  // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(240,47,194,0.7)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                        }
                    },
                },
          {
            name: 'outlier',
            type: 'scatter',//使用散点图显示异常值
            datasetIndex: 2
          },
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    });
}

// 启动|刷新 浏览器 调用
market3b();